<template>
  <ElSelect v-model="data.value" popper-class="fa-contract-scope" :placeholder="placeholder" clearable filterable>
    <ElOption
      class="fa-widget-select__option"
      v-for="(option, index) in data.selectOptions"
      :key="index"
      :value="option"
      :label="option"
      :title="option"
    />
  </ElSelect>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Widget } from '@/models'

/** 下拉选择控件 填写 */
export default defineComponent({
  name: 'FaSelectFill',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    return {
      /** 文本占位 */
      placeholder: computed(() => {
        const widget = props.data
        return widget.text.placeholder || `请选择${widget.displayName}`
      })
    }
  }
})
</script>
